<template>
  <div class="home">
    <div class="menu">
      <div class="menu-item" @click="selectType('Anchor')" :class="currentType === 'Anchor' ? 'focus' :''">天选</div>
      <div class="menu-item" @click="selectType('RedPocket')" :class="currentType === 'RedPocket' ? 'focus' :''">红包</div>
    </div>
    <RoomList :roomList="anchorRoomList" v-if="currentType === 'Anchor'"></RoomList>
    <RoomList :roomList="redpocketRoomList" v-else></RoomList>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue';
import { getAnchorPocketRoomList, getRedPocketRoomList } from '@/services/cloud';
import RoomList from '../components/RoomList.vue';
import { getAnchorStartTime, getRedPocketStartTime } from '../utils';

enum Type {
  RedPocket = 'RedPocket',
  Anchor = 'Anchor',
}

@Options({
  components: {
    HelloWorld,
    RoomList
  },
  data () {
    return {
      redpocketRoomList: [],
      anchorRoomList: [],
      currentType: Type.RedPocket
    };
  },
  mounted (): void {
    this.flushRoomList();
    setInterval(() => {
      this.flushRoomList();
    }, 5000);
  },
  methods: {
    async flushRoomList () {
      const rList = await getRedPocketRoomList();
      const aList = await getAnchorPocketRoomList();
      this.redpocketRoomList = rList.sort((pre, next) => {
        if (!pre.data.popularity_red_pocket || !next.data.popularity_red_pocket) {
          return 0;
        }
        return getRedPocketStartTime(pre) - getRedPocketStartTime(next);
      }).filter(room => {
        const startTime = getRedPocketStartTime(room);
        return startTime > Math.floor(new Date().valueOf() / 1000);
      });
      this.anchorRoomList = aList.sort((pre, next) => {
        if (!pre.data.anchor || !next.data.anchor) {
          return 0;
        }
        return getAnchorStartTime(pre) - getAnchorStartTime(next);
      }).filter(room => {
        const startTime = getAnchorStartTime(room);
        return startTime > Math.floor(new Date().valueOf() / 1000);
      });
    },
    selectType (type: string) {
      this.currentType = type;
    }
  }
})
export default class HomeView extends Vue {
  anchorRoomList: any;
  redpocketRoomList: any;
}
</script>

<style lang="less" scoped>

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-item {
  width: 40px;
  padding: 6px;
  background: #9bd1ff;
  margin: 0 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
}
.menu-item.focus {
  background: #1975ff;
}
</style>
